<template>
    <div class="login">
        <div class="login_box">
            <!-- Logo -->
            <div class="avatar">
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 表单 -->
            <!-- 添加数据绑定 :model="loginForm"-->
            <!-- 验证规则对象 :rules="loginFormRules" -->
            <!-- 可以利用ref="loginFormRef"来获取表单的实例对象 -->
            <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-width="0px" class="login_form">
                <!-- username -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <!-- password -->
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-lock_fill"></el-input>
                </el-form-item>
                <!-- button -->
                 <el-form-item class="btn">
                     <el-button type="primary" @click="login" plain>登录</el-button>
                     <el-button type="info" @click="resetLoginForm" plain>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            loginForm: {
                username:'',
                password:''
            },
            //验证规则
            loginFormRules:{
                username:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:11,message:'登录名称长度在3-11个字符',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'},
                    {min:6,max:15,message:'密码名称长度在6-15个字符',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        //重置表单
        resetLoginForm(){
            console.log(this);//this表示当前login.vue对象自身
            this.$refs.loginFormRef.resetFields();
        },
        login(){
            this.$refs.loginFormRef.validate(async valid=>{
                console.log(valid)
                //如果用户名密码输入没有问题就可以向后台发送异步请求了
                if(valid==false){
                    return;
                }
                const{data:res}=await this.$http.post("login",this.loginForm);
                if(res.meta.status!==200){
                    return this.$message.error('登陆失败'+res.meta.msg)
                }
                this.$message.success('登陆成功')

                //登陆成功后我们要将后台返回的token保存到客户端的sessionstorage中只要当我们的页面关闭的时候session的数据就会消失
                //只有登录后才能访问其他的api接口
                window.sessionStorage.setItem('token',res.data.token)
                //可以跳转到后台的首页
                this.$router.push('/home')
            })
        }
    }
}
</script>
//如果定义scoped表示样式只在当前组件有效
<style lang="less" scoped>
    .login{
        background-color: rgb(173, 177, 175);
        height: 100%;
    }
    .login_box{
        width: 450px;
        height: 350px;
        background-color: rgb(75, 74, 74);
        border-radius: 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        .avatar{
            height: 130px;
            width: 130px;
            border: 1px solid rgb(253, 253, 253);
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #dddddd;
            position: absolute;
            transform:translate(-50%,-50%);
            left: 50%;
            background-color: rgb(189, 187, 184);
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eeeeee;
            }
        }
    }
    .btn{
        display: flex;
        //尾部对其
        justify-content: flex-end;
    }
    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
</style>
